import { useState } from "react"
import { View, Text, Button } from "@tarojs/components"
import "./horoscope.scss"

const zodiacSigns = [
  { id: "aries", name: "白羊座", date: "3.21-4.19", element: "火象", ruler: "火星", emoji: "♈" },
  { id: "taurus", name: "金牛座", date: "4.20-5.20", element: "土象", ruler: "金星", emoji: "♉" },
  { id: "gemini", name: "双子座", date: "5.21-6.21", element: "风象", ruler: "水星", emoji: "♊" },
  { id: "cancer", name: "巨蟹座", date: "6.22-7.22", element: "水象", ruler: "月亮", emoji: "♋" },
  { id: "leo", name: "狮子座", date: "7.23-8.22", element: "火象", ruler: "太阳", emoji: "♌" },
  { id: "virgo", name: "处女座", date: "8.23-9.22", element: "土象", ruler: "水星", emoji: "♍" },
  { id: "libra", name: "天秤座", date: "9.23-10.23", element: "风象", ruler: "金星", emoji: "♎" },
  { id: "scorpio", name: "天蝎座", date: "10.24-11.22", element: "水象", ruler: "冥王星", emoji: "♏" },
  { id: "sagittarius", name: "射手座", date: "11.23-12.21", element: "火象", ruler: "木星", emoji: "♐" },
  { id: "capricorn", name: "摩羯座", date: "12.22-1.19", element: "土象", ruler: "土星", emoji: "♑" },
  { id: "aquarius", name: "水瓶座", date: "1.20-2.18", element: "风象", ruler: "天王星", emoji: "♒" },
  { id: "pisces", name: "双鱼座", date: "2.19-3.20", element: "水象", ruler: "海王星", emoji: "♓" },
]

const generateFortune = () => {
  const fortunes = [
    "今天的你充满活力，适合开始新的计划。",
    "今天可能会遇到一些挑战，但保持冷静就能克服。",
    "今天是反思和休息的好日子，不要给自己太大压力。",
    "今天你的创造力特别强，可以尝试艺术活动。",
    "今天适合社交活动，可能会遇到对你未来有帮助的人。",
  ]

  return {
    overall: fortunes[Math.floor(Math.random() * fortunes.length)],
    luck: Math.floor(Math.random() * 5) + 1,
    love: Math.floor(Math.random() * 5) + 1,
    career: Math.floor(Math.random() * 5) + 1,
    wealth: Math.floor(Math.random() * 5) + 1,
  }
}

export default function Horoscope() {
  const [selectedZodiac, setSelectedZodiac] = useState(zodiacSigns[0])
  const [fortune, setFortune] = useState(generateFortune())

  const handleSelectZodiac = (zodiac) => {
    setSelectedZodiac(zodiac)
    setFortune(generateFortune())
  }

  const renderStars = (level) => {
    return Array(5)
      .fill(0)
      .map((_, index) => (
        <Text key={index} className={`star ${index < level ? "active" : ""}`}>
          ⭐
        </Text>
      ))
  }

  return (
    <View className="horoscope">
      <View className="container">
        <View className="header">
          <Text className="title">星座运势</Text>
          <Text className="subtitle">每日星座运程解析</Text>
        </View>

        <View className="zodiac-selector">
          {zodiacSigns.map((zodiac) => (
            <Button
              key={zodiac.id}
              className={`zodiac-item ${selectedZodiac.id === zodiac.id ? "active" : ""}`}
              onClick={() => handleSelectZodiac(zodiac)}
            >
              <View className="zodiac-emoji">{zodiac.emoji}</View>
              <Text className="zodiac-name">{zodiac.name}</Text>
            </Button>
          ))}
        </View>

        <View className="zodiac-detail">
          <View className="zodiac-header card">
            <View className="zodiac-large-emoji">{selectedZodiac.emoji}</View>
            <View className="zodiac-info">
              <Text className="zodiac-title">{selectedZodiac.name}</Text>
              <Text className="zodiac-date">{selectedZodiac.date}</Text>
              <View className="zodiac-attributes">
                <Text className="attribute">元素: {selectedZodiac.element}</Text>
                <Text className="attribute">主宰星: {selectedZodiac.ruler}</Text>
              </View>
            </View>
          </View>

          <View className="fortune-card card">
            <Text className="card-title">今日运势</Text>
            <Text className="fortune-text">{fortune.overall}</Text>

            <View className="fortune-ratings">
              <View className="rating-item">
                <Text className="rating-label">综合运势</Text>
                <View className="rating-stars">{renderStars(fortune.luck)}</View>
              </View>
              <View className="rating-item">
                <Text className="rating-label">爱情运势</Text>
                <View className="rating-stars">{renderStars(fortune.love)}</View>
              </View>
              <View className="rating-item">
                <Text className="rating-label">事业运势</Text>
                <View className="rating-stars">{renderStars(fortune.career)}</View>
              </View>
              <View className="rating-item">
                <Text className="rating-label">财富运势</Text>
                <View className="rating-stars">{renderStars(fortune.wealth)}</View>
              </View>
            </View>
          </View>

          <View className="compatibility-card card">
            <Text className="card-title">星座匹配</Text>
            <View className="compatibility-content">
              <View className="compatibility-item">
                <Text className="compatibility-label">最佳匹配</Text>
                <View className="compatibility-signs">
                  {zodiacSigns.slice(0, 2).map((zodiac) => (
                    <View key={zodiac.id} className="compatibility-sign">
                      <View className="sign-emoji">{zodiac.emoji}</View>
                      <Text className="sign-name">{zodiac.name}</Text>
                    </View>
                  ))}
                </View>
              </View>

              <View className="compatibility-item">
                <Text className="compatibility-label">最差匹配</Text>
                <View className="compatibility-signs">
                  {zodiacSigns.slice(6, 8).map((zodiac) => (
                    <View key={zodiac.id} className="compatibility-sign">
                      <View className="sign-emoji">{zodiac.emoji}</View>
                      <Text className="sign-name">{zodiac.name}</Text>
                    </View>
                  ))}
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  )
}